<script lang="ts" setup>
const props = defineProps({
    radioValue: {
        type: Number
    },
    checkboxValue: {
        type: Array as PropType<number[]>,
        default: []
    }
})

const accordionValue = ref()
let checkedVal = reactive({
    radioValue: props.radioValue,
    checkboxValue: props.checkboxValue
})

const radioList = [
    { title: '城建税(7%)教育附加费(3%)地方教育附加费(2%)', extra: "减半征收(6%)", value: 6 },
    { title: '城建税(5%)教育附加费(3%)地方教育附加费(2%)', extra: "减半征收(5%)", value: 5 },
    { title: '城建税(1%)教育附加费(3%)地方教育附加费(2%)', extra: "减半征收(3%)", value: 3 }
]

const checkboxList = [
    { title: '印花税', extra: "减半征收(0.015%)", value: 0.015 },
    { title: '水利基金', extra: "0.06%", value: 0.06 }
]


// 定义 emit 事件
const emit = defineEmits<{
    (event: 'change', checkedVal): void
}>()

const changeHandle = () => {
    emit("change", checkedVal)
}
</script>

<template>
    <view class="select">
        <sar-accordion v-model="accordionValue">
            <sar-accordion-item title="月收入10万以上点击这里" name="1">
                <view class="font-size-26rpx color-#969799">
                    增值税及附加：达到10万以上的金额，根据
                    <a style="color: var(--sar-primary);" target="_blank"
                        href="http://beijing.chinatax.gov.cn/bjswj/c104560/202308/f197eb8580a1415c92677835c4f861f9.shtml">
                        (财政部税务总局公告2023年第12号文)</a>
                    减半征收 请按需选择
                </view>
                <view class="my-20rpx">
                    <sar-radio-group v-model="checkedVal.radioValue" size="small" 
                    @change="changeHandle">
                        <template v-for="(item, index) in radioList" :key="index">
                            <sar-radio :value="item.value">
                                <view class="font-size-26rpx">
                                    <text class="color-#000000 inline-block mb-5rpx">{{ item.title }}</text>
                                    <br>
                                    <text style="color:var(--sar-primary)">{{ item.extra }}</text>
                                </view>
                            </sar-radio>
                        </template>
                    </sar-radio-group>
                </view>
                <sar-checkbox-group v-model="checkedVal.checkboxValue" size="small" @change="changeHandle">
                    <template v-for="(item, index) in checkboxList" :key="index">
                        <sar-checkbox :value="item.value">
                            <text class="font-size-26rpx color-#000000">{{ item.title }}</text>
                            <text class="font-size-26rpx inline-block ml-10rpx" style="color:var(--sar-primary)">
                                {{ item.extra }}
                            </text>
                        </sar-checkbox>
                    </template>
                </sar-checkbox-group>
            </sar-accordion-item>
        </sar-accordion>
    </view>
</template>

<style lang="scss" scoped>
::v-deep(.select) {
    .sar-accordion {
        &::before {
            border: none;
        }
    }

    .sar-accordion-item {
        background-color: rgba(var(--sar-primary-rgb), var(--sar-button-pale-bg-opacity));

        .sar-accordion-item__body,
        .sar-accordion-item__header {
            padding: 30rpx 20rpx;
        }

        .sar-accordion-item__header {
            &::after {
                position: absolute;
                box-sizing: border-box;
                content: " ";
                pointer-events: none;
                right: 20rpx;
                bottom: 0;
                left: 20rpx;
                border-bottom: 1px solid #ebedf0;
                transform: scaleY(.5);
            }

            .sar-accordion-item__title {
                color: var(--sar-primary);
                font-size: 24rpx;
            }

            .sar-accordion-item__arrow {
                color: var(--sar-primary);
                font-weight: 600;
            }
        }
    }
}
</style>